<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>订单管理</title>

    <link href="./AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="./css/personal.css" rel="stylesheet" type="text/css">
    <link href="./css/orstyle.css" rel="stylesheet" type="text/css">

    <script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="./AmazeUI-2.4.2/assets/js/amazeui.js"></script>


    <!-- 引入vue和Axios   -->
    <script src="js/plugins/vue/dist/vue.js"></script>
    <script src="js/plugins/axios/dist/axios.js"></script>
    <script src="js/common.js"></script>

</head>

<body>
<div >

    <!--头 -->
    <header>
        <article>
            <div class="mt-logo">
                <!--顶部导航条 -->
                <div class="am-container header">
                    <ul class="message-l">
                        <div class="topMessage">
                            <div class="menu-hd">
                                <a href="#" target="_top" class="h">亲，请登录</a>
                                <a href="#" target="_top">免费注册</a>
                            </div>
                        </div>
                    </ul>
                    <ul class="message-r">
                        <div class="topMessage home">
                            <div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
                        </div>
                        <div class="topMessage my-shangcheng">
                            <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i
                                    class="am-icon-user am-icon-fw"></i>个人中心</a></div>
                        </div>
                        <div class="topMessage mini-cart">
                            <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
                                    id="J_MiniCartNum" class="h">0</strong></a></div>
                        </div>
                        <div class="topMessage favorite">
                            <div class="menu-hd"><a href="#" target="_top"><i
                                    class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
                        </div>
                    </ul>
                </div>

                <!--悬浮搜索框-->
                <div>
                    <div class="nav white">
                        <div class="logoBig">
                            <li><img src="./images/logobig.png"/></li>
                        </div>

                        <div class="search-bar pr">
                            <a name="index_none_header_sysc" href="#"></a>
                            <form>
                                <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                                       autocomplete="off">
                                <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </header>
    <div class="nav-table">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
            <ul>
                <li class="index"><a href="#">首页</a></li>
                <li class="qc"><a href="#">闪购</a></li>
                <li class="qc"><a href="#">限时抢</a></li>
                <li class="qc"><a href="#">团购</a></li>
                <li class="qc last"><a href="#">大包装</a></li>
            </ul>
            <div class="nav-extra">
                <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
            </div>
        </div>
    </div>
    <b class="line"></b>
    <div class="center">
        <div class="col-main">
            <div class="main-wrap">

                <div class="user-order">

                    <!--标题 -->
                    <div class="am-cf am-padding">
                        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> /
                            <small>Order</small></div>
                    </div>
                    <hr/>

                    <div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>

                        <ul class="am-avg-sm-5 am-tabs-nav am-nav am-nav-tabs">
                            <li class="am-active"><a href="#tab1">所有消息</a></li>
                            <li><a href="#tab2">等待主人</a></li>
                            <li><a href="#tab3">被驳回</a></li>
                            <li><a href="#tab4">已找到主人</a></li>
                        </ul>

                        <div class="am-tabs-bd">
                            <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                                <div class="order-top">
                                    <div class="th th-item">
                                        <td class="td-inner">信息</td>
                                    </div>

                                    <div class="th th-amount">

                                        <td class="td-inner">价格</td>
                                    </div>
                                    <div class="th th-status">
                                        <td class="td-inner">状态</td>
                                    </div>
                                    <div class="th th-change">
                                        <td class="td-inner">操作</td>
                                    </div>


                                </div>

                                <div class="order-main">
                                    <div class="order-list">

                                        <!--交易成功-->
                                        <div class="order-status5">

                                            <div id="searchMasterMsgForm" class="order-content">
                                                <div class="order-left">
                                                    <ul class="item-list">
                                                        <li v-for="item in searchMasterMsgs" class="td td-item">

                                                            <div class="item-pic">
                                                                <a href="#" class="J_MakePoint">
                                                                    <img src="http://123.207.27.208/group1/M00/00/5C/CgAIC2K-w1uAJGNEAAIl5Q-U_lE309.jpg"
                                                                         class="itempic J_ItemImg">
                                                                </a>
                                                            </div>
                                                            <div class="item-info">
                                                                <div class="item-basic-info">
                                                                    <a href="#">
                                                                        <p>{{item.title}}</p>
                                                                        <p class="info-little">
                                                                            <br/>{{item.name}}</p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>
                                                <div class="order-right">
                                                    <li class="td td-amount">
                                                        <div class="item-amount">
                                                            合计：676.00
                                                            <p>含运费：<span>10.00</span></p>
                                                        </div>
                                                    </li>
                                                    <div class="move-right">
                                                        <li class="td td-status">
                                                            <div class="item-status">
                                                                <p class="Mystatus">交易成功</p>
                                                            </div>
                                                        </li>
                                                        <li class="td td-change">
                                                            <div class="am-btn am-btn-danger anniu">
                                                                删除订单
                                                            </div>
                                                        </li>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>
        <aside class="menu">
            <ul>
                <li class="person active">
                    <a href="index.html"><i class="am-icon-user"></i>个人中心</a>
                </li>
                <li class="person">
                    <p><i class="am-icon-newspaper-o"></i>个人资料</p>
                    <ul>
                        <li><a href="information.html">个人信息</a></li>
                        <li><a href="safety.html">安全设置</a></li>
                        <li><a href="address.html">地址管理</a></li>
                        <li><a href="cardlist.html">快捷支付</a></li>
                    </ul>
                </li>
                <li class="person">
                    <p><i class="am-icon-balance-scale"></i>我的交易</p>
                    <ul>
                        <li><a href="searchMaster.html">订单管理</a></li>
                        <li><a href="change.html">退款售后</a></li>
                        <li><a href="comment.html">评价商品</a></li>
                    </ul>
                </li>

            </ul>

        </aside>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#searchMasterMsgForm",
        data: {
            query: {
                keyWord: ''
            },
            searchMasterMsgs: []
        }, methods: {
            getSearchMasterMsgs() {
                this.$http.post("/searchMasterMsg/user", this.query).then(res => {
                    res = res.data;
                    this.searchMasterMsgs = res;
                    console.log(this.searchMasterMsgs)
                })
            }
        },
        mounted() {
            this.getSearchMasterMsgs();
        }
    });
</script>
</body>

</html>